<DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="yanglaoactive.css" />

            <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
            <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="yanglaoactive.js" type="text/javascript" charset="utf-8"></script>
  
    </head>
   
    <body>
        <header>
         
            <div class="navtou">
                    <nav class="navbar navbar-default" id="bgone" role="navigation" style="margin-bottom: 0px;">
                            <div class="container-fluid"> 
                            <div class="navbar-header">
                                <a class="navbar-brand" id="headercolor" href="#">孝E孝养老云运用平台</a><span class=" liebiao glyphicon glyphicon-menu-hamburger">
                            </div>
                            <div class="headerright">
                                <ul class="nav navbar-nav">
                                   
                                    <li class="dropdown">
                                            <a href="#" id="ccb" style="background-color: #2196F3;color:white" class="dropdown-toggle" data-toggle="dropdown">
                                                消息
                                                <b class="caret"></b>
                                            </a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">你有是三条新消息</a></li>
                                                <li><a href="#">新用户注册</a></li>
                                               
                                                <li><a href="#">分离的链接</a></li>
                                                <li class="divider"></li>
                                                <li><a href="#">查看更多</a></li>
                                            </ul>
                                        </li>
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" style="background-color: #2196F3; color:white" data-toggle="dropdown">
                                            设置
                                            <b class="caret"></b>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">我的资料</a></li>
                                            <li><a href="#">我的日历</a></li>
                                            <li><a href="#">我的任务</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">分离的链接</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">退出</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            </div>
                        </nav>
            </div>
        </header>
        <div class="contain">
                <div class="caidan"  style="float:left;">
                      <ul class="sidebar">
                            <li  class="li11 hidemenu">
                                 <a href="javacript:void"><span class="tubiao glyphicon glyphicon-home"></span>首页</a>
                                <ul>
                                    <li>养老服务</li></a>
                                    <li>孝e孝IE</li>
                                </ul>
                            </li>
                            <li class="li11 hidemenu">
                                    <a href="javacript:void"><span class="tubiao glyphicon glyphicon-tower"></span>用户管理 <span class="jiantou glyphicon glyphicon-chevron-right"></span> </a>
                                    <ul>
                                            <li>集团用户</li>
                                            <li>民政用户</li>
                                            <li>机构用户</li>
                                    </ul>
                            </li>
                            <li class="li11 hidemenu">
                                <a href="javacript:void">  <span class="tubiao glyphicon glyphicon-edit"></span>应用中心<span class="jiantou  glyphicon glyphicon-chevron-right"></span> </a>
                                <ul>
                                        <li>应用管理</li>
                                        <li>应用描述</li>
                                </ul>
                            </li>
                            <li class="li11 hidemenu">
                                <a href="javacript:void"> <span class="tubiao glyphicon glyphicon-edit"></span>在线学堂<span class="jiantou glyphicon glyphicon-chevron-right"></span> </a>
                                <ul>
                                        <li>分类管理</li>
                                        <li>内容发布管理</li>
                                </ul> 
                            </li>
                            <li class="li11 hidemenu">
                                    <a href="javacript:void"><span class="tubiao glyphicon glyphicon-edit"></span>角色管理<span class="jiantou glyphicon glyphicon-chevron-right"></span> </a>
                                       <ul>
                                            <li>机构用户</li>
                                            <li>民政用户</li>
                                            <li>集团用户</li>
                                       </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="right">
                            <div class="activeb">
                                    <a href="#" class="abbb">应用中心</a><a href="# "  class="aab">应用管理</a>
                            </div>
                            <div class="bgcolorcen">
                                    <div class="mingcheng">
                                            <table>
                                                    <tr>
                                                        <td>
                                                            <div class="form-group">
                                                                <label class="ccc control-label">应用名称:</label>
                                                                <input type="text" name="" class="form-control">
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="ccc control-label">应用状态:</label>
                                                                <select class="form-control">
                                                                    <option selected="selected"> 全部</option>
                                                                    <option>使用中</option>
                                                                    <option>已停用</option>
                                                                </select>
                                                            </div>
                                                            <a class="btn btn-primary">查询</a>
                                                        </td>
                                                        <td class="align-right" style="width: 370px;
                                                        float: right;">
                                                        <button type="button btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" class="btn btn-success" style="float: right;">新增应用</button>
                                                                       
                                                        </td>
                                                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                                            <div class="modal-dialog">
                                                                <div class="modal-content">
                                                                    <div class="modal-header">
                                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                            &times;
                                                                        </button>
                                                                        <h4 class="modal-title" id="myModalLabel">
                                                                            新增应用
                                                                        </h4>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                      <div> 应用名称：<input type="text" placeholder="给你的应用起个名称"></div><br>
                                                                       <div>应用菜单图标：<img class="icon" src="./../app_icon_dagl.jpg" ><img src="./../p_default.png"></div><br>
                                                                       <p id="shangchuan">建议上传图片尺寸200*200，大小不超过1M.</p>
                                                                       <div>
                                                                           应用中心图标：<img class="tuidong" src="./../aag.jpg"><img src="./../p_default.png" ><br>
                                                                           <p id="shangchuan">建议上传图片尺寸200*200，大小不超过1M.</p> 
                                                                       </div>
                                                                       <div> 应用价格：<input type="text" ></div><br>
                                                                       <div> 应用摘要：<input type="text" ></div><br>
                                                                       <div> 应用介绍：<input type="text" placeholder="对应用添加一些介绍，不超过300字。"></div><br>
                                                                       <div class="form-group">
                                                                        <label class="col-md-3 control-label">应用中心图标:</label>
                                                                        <div class="col-md-9">
                                                                            <img src="./../app_dagl.jpg"   >
                                                                           
                                                                            <p >建议上传图片尺寸338*228，大小不超过1M</p>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                                        </button>
                                                                        <button type="button" class="btn btn-primary">
                                                                            提交更改
                                                                        </button>
                                                                    </div>
                                                                </div><!-- /.modal-content -->
                                                            </div><!-- /.modal -->
                                                        </div>
                                                    </tr>
                                                </table>
                                    </div>
                                    <div class="row" style="margin-left:10px; " >
                                        <div class="col-md-12" style=" padding-left:0px;padding-right:0px;   width: 1026px;">
                                            <div class="widget box">
                                                <div class="widget-header">
                                                    <h4><i class="icon-reorder"></i> 全部应用</h4>
                                                </div>
                                                <div class="widget-content app_table no-padding">
                                                    <table class="table table-striped table-bordered table-hover table-checkable table-responsive" id="cc">
                                                        <thead>
                                                            <tr>
                                                                <th>序号</th>
                                                                <th>应用菜单图标</th>
                                                                <th>应用插图图标</th>
                                                                <th>应用名称 </th>
                                                                <th>摘要 </th>
                                                                <th style="width: 400px;">应用描述 </th>
                                                                <th>状态</th>
                                                                <th style="width: 200px;">操作</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr>
                                                                <td>1</td>
                                                                <td><img src="./../app_icon_dagl.jpg" style="height: 40px;"></td>
                                                                <td><img src="./../app_dagl.jpg" style="height: 40px;"></td>
                                                                <td>档案管理</td>
                                                                <td>护理设备</td>
                                                                <td>
                                                                    <div>搭上了由 Pepper、Zenbo 所开启机器人助手列车，由台湾新创团队丽阳科技（Robotelf）所打造</div>
                                                                    <div>基础版：3800元/月 超级版：5800元/月</div>
                                                                </td>
                                                                <td>使用中</td>
                                                                <td>
                                                                    <button type="button btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" class="btn btn-success" >编辑</button>
                                                                    <a class="btn btn-success">停用</a>
                                                                    <a class="btn btn-danger">删除</a>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>2</td>
                                                                <td><img src="./../app_icon_jdgl.jpg" style="height: 40px;"></td>
                                                                <td><img src="./../app_jdgl.jpg" style="height: 40px;"></td>
                                                                <td>接待管理</td>
                                                                <td>护理设备</td>
                                                                <td>
                                                                    <div>搭上了由 Pepper、Zenbo 所开启机器人助手列车，由台湾新创团队丽阳科技（Robotelf）所打造</div>
                                                                    <div>基础版：3800元/月 超级版：5800元/月</div>
                                                                </td>
                                                                <td class="warning-color">已停用</td>
                                                                <td>
                                                                    <button type="button btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" class="btn btn-success" >编辑</button>
                                                                    <a class="btn btn-success">停用</a>
                                                                    <a class="btn btn-danger">删除</a>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                            <div style="text-align: right;margin-top: -20px;">
                                                <nav class="f" aria-label="Page navigation">
                                                    <ul class="pagination">
                                                        <li class="disabled">
                                                            <span>
                                             <span aria-hidden="true">&laquo;</span>
                                                            </span>
                                                        </li>
                                                        <li class="active"> <span>1 <span class="sr-only">(current)</span></span>
                                                        </li>
                                                        <li>
                                                            <a href="#">2</a>
                                                        </li>
                                                        <li>
                                                            <a href="#">3</a>
                                                        </li>
                                                        <li>
                                                            <a href="#">4</a>
                                                        </li>
                                                        <li>
                                                            <a href="#">5</a>
                                                        </li>
                                                        <li>
                                                            <a href="#" aria-label="Next">
                                                                <span aria-hidden="true">&raquo;</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </nav>
                                            </div>
                                        </div>
                                    </div>

                            </div>
                    </div>
                       
                </div>
        </div>
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
                    </div>
                    <div class="modal-body">在这里添加一些文本</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">提交更改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
     <script>
  function showModel(){
        $('#myModal').modal('show');
     }
     
     </script>
    </body>
</html>